<template>
  <div class="health-indicators">
    <h2>健康指标管理</h2>
    
    <div class="filter-section">
      <div class="filter-group">
        <label for="indicator-type">指标类型</label>
        <select v-model="filter.indicatorType" id="indicator-type">
          <option value="all">全部指标</option>
          <option value="bloodPressure">血压</option>
          <option value="cholesterol">胆固醇</option>
          <option value="glucose">血糖</option>
          <option value="bmi">BMI指数</option>
        </select>
      </div>
      <div class="filter-group">
        <label for="status">状态</label>
        <select v-model="filter.status" id="status">
          <option value="all">全部状态</option>
          <option value="normal">正常</option>
          <option value="abnormal">异常</option>
        </select>
      </div>
      <div class="filter-group">
        <label for="date-range">日期范围</label>
        <input type="date" v-model="filter.startDate" id="start-date" />
        <span>至</span>
        <input type="date" v-model="filter.endDate" id="end-date" />
      </div>
      <button @click="searchIndicators" class="search-btn">搜索</button>
    </div>
    
    <div class="indicators-table">
      <table>
        <thead>
          <tr>
            <th>用户ID</th>
            <th>用户姓名</th>
            <th>指标类型</th>
            <th>指标值</th>
            <th>状态</th>
            <th>记录时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="indicator in indicatorsData" :key="indicator.id">
            <td>{{ indicator.userId }}</td>
            <td>{{ indicator.userName || '未知' }}</td>
            <td>{{ getIndicatorTypeName(indicator.indicatorType) }}</td>
            <td>{{ indicator.value }}</td>
            <td :class="['status', indicator.status]">{{ indicator.status === 'abnormal' ? '异常' : '正常' }}</td>
            <td>{{ formatDate(indicator.recordTime) }}</td>
            <td>
              <button @click="viewUserDetail(indicator.userId)" class="detail-btn">查看用户详情</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <div v-if="indicatorsData.length === 0" class="empty-state">
      <p>暂无数据</p>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

export default {
  name: 'HealthIndicators',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const indicatorsData = ref([])
    const filter = ref({
      indicatorType: 'all',
      status: 'all',
      startDate: '',
      endDate: ''
    })
    
    // 获取指标类型名称
    const getIndicatorTypeName = (type) => {
      const typeMap = {
        bloodPressure: '血压',
        cholesterol: '胆固醇',
        glucose: '血糖',
        bmi: 'BMI指数'
      }
      return typeMap[type] || type
    }
    
    // 格式化日期
    const formatDate = (dateString) => {
      if (!dateString) return ''
      const date = new Date(dateString)
      return date.toLocaleString('zh-CN')
    }
    
    // 搜索指标数据
    const searchIndicators = () => {
      // 这里应该有API调用获取数据
      console.log('搜索条件:', filter.value)
      // 模拟数据
      indicatorsData.value = [
        {
          id: 1,
          userId: 1001,
          userName: '张三',
          indicatorType: 'bloodPressure',
          value: '160/95',
          status: 'abnormal',
          recordTime: new Date().toISOString()
        },
        {
          id: 2,
          userId: 1002,
          userName: '李四',
          indicatorType: 'cholesterol',
          value: '偏高',
          status: 'abnormal',
          recordTime: new Date().toISOString()
        }
      ]
    }
    
    // 查看用户详情
    const viewUserDetail = (userId) => {
      router.push(`/admin/user-management/detail/${userId}`)
    }
    
    // 组件挂载时加载数据
    onMounted(() => {
      // 检查URL查询参数中是否有status
      if (route.query.status) {
        filter.value.status = route.query.status
      }
      searchIndicators()
    })
    
    return {
      indicatorsData,
      filter,
      getIndicatorTypeName,
      formatDate,
      searchIndicators,
      viewUserDetail
    }
  }
}
</script>

<style scoped>
.health-indicators {
  padding: 20px;
}

.filter-section {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 6px;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-group label {
  font-size: 14px;
  color: #606266;
  white-space: nowrap;
}

.filter-group select,
.filter-group input {
  padding: 6px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
}

.search-btn {
  padding: 6px 16px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.search-btn:hover {
  background-color: #66b1ff;
}

.indicators-table {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

th,
td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

th {
  background-color: #f5f7fa;
  font-weight: 500;
  color: #303133;
}

.status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.status.normal {
  background-color: #f0f9eb;
  color: #67c23a;
}

.status.abnormal {
  background-color: #fef0f0;
  color: #f56c6c;
}

.detail-btn {
  padding: 4px 12px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.detail-btn:hover {
  background-color: #66b1ff;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #909399;
  background-color: white;
  margin-top: 20px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>